<template>
	<view class="facilityDetail-container">
		<view class="header">
			<view class="title">
				{{facility.facilityName}}
			</view>
			<view class="bottom">
				<view class="info">
					<view class="overhaulDate">
						<text class="iconfont icon-jianxiu2" style="margin-right: 10rpx;"></text>
						最近一次检修：{{facility.overhaulDate}}
					</view>
					<view class="useStatus used" v-if="facility.useStatus == 1">
						<text class="iconfont icon-manglu" style="margin-right: 10rpx;"></text>
						正在使用
					</view>
					<view class="useStatus notUsed" v-if="facility.useStatus == 0">
						<text class="iconfont icon-kongxian" style="margin-right: 10rpx;"></text>
						当前空闲
					</view>
				</view>
				<view class="introduction">
					简介：{{facility.facilityDescribe}}
				</view>
			</view>
		</view>
		<view class="content">
			<view class="line">
				
			</view>
			<view class="timeItemRow">
				<view :class="timeItem1" @click="selectTime(1)">
					<view class="time">
						08:00 - 10:00
					</view>
					<view class="orderState">
						{{timeTable[0] == 1? '可预约':'不可预约'}}{{test}}
					</view>
				</view>
				<view :class="timeItem2" @click="selectTime(2)">
					<view class="time">
						10:00 - 12:00
					</view>
					<view class="orderState">
						{{timeTable[1] == 1? '可预约':'不可预约'}}{{test}}
					</view>
				</view>
				<view :class="timeItem3" @click="selectTime(3)">
					<view class="time">
						12:00 - 14:00
					</view>
					<view class="orderState">
						{{timeTable[2] == 1? '可预约':'不可预约'}}{{test}}
					</view>
				</view>
			</view>
			<view class="timeItemRow">
				<view :class="timeItem4" @click="selectTime(4)">
					<view class="time">
						14:00 - 16:00
					</view>
					<view class="orderState">
						{{timeTable[3] == 1? '可预约':'不可预约'}}{{test}}
					</view>
				</view>
				<view :class="timeItem5" @click="selectTime(5)">
					<view class="time">
						16:00 - 18:00
					</view>
					<view class="orderState">
						{{timeTable[4] == 1? '可预约':'不可预约'}}{{test}}
					</view>
				</view>
				<view :class="timeItem6" @click="selectTime(6)">
					<view class="time">
						18:00 - 20:00
					</view>
					<view class="orderState">
						{{timeTable[5] == 1? '可预约':'不可预约'}}{{test}}
					</view>
				</view>
			</view>
		</view>
		<view class="footer">
			<view class="left">
				预约日期：{{facilityOrderRecordVo.orderDate}}
				<br>
				预约时间：{{orderTime}}
			</view>
			<view class="right" @click="orderFacility">
				<text class="iconfont icon-yuyue1" style="margin-right: 20rpx;"></text>
				确认预约
			</view>
		</view>
		<fui-dialog 
			:show="dialog.dialogShow" 
			title="提示" 
			content="您没有选择任何时间段！" 
			:buttons="dialog.buttons" 
			@click="onTap"></fui-dialog>
			<!-- {{new Date().toLocaleDateString()}} -->
	</view>
</template>

<script>
	export default {
		data() {
			return {
				dialog:{
					dialogShow: false,
					buttons: [{
						text: '确定',
						color: '#FF2B2B'
					}]
				},
				facility:{
					id:'',
					facilityName:'',
					facilityDescribe:'',
					state:null,
					useStatus:null,
					overhaulDate:null
				},
				facilityOrderRecordVo:{
					facilityId:'',
					orderDate:'',
					ownerId:'',
					timeTableId:null
				},
				userInfo:{},
				timeTable:[0,0,0,0,0,0],
				timeItem1: 'notActive timeItem',
				timeItem2: 'notActive timeItem',
				timeItem3: 'notActive timeItem',
				timeItem4: 'notActive timeItem',
				timeItem5: 'notActive timeItem',
				timeItem6: 'notActive timeItem',
				orderTime: '尚未选择',
				test:''
			}
		},
		onLoad(opt){
			// console.log(opt)
			this.facilityOrderRecordVo.orderDate = opt.date
			this.facilityOrderRecordVo.facilityId = opt.id
			this.getFacility(opt.id)
			this.getUserInfo()
			// console.log(opt.id)
		},
		onReady(){
			this.getTimeTable(this.facilityOrderRecordVo.facilityId,this.facilityOrderRecordVo.orderDate)
		},
		methods: {
			onTap(){
				this.dialog.dialogShow = false
			},
			getUserInfo(){
				const token = uni.getStorageSync("userToken")
				this.$myReq({
					url: '/owner/login/loginUserInfo/' + token,
					method:'GET'
				})
				.then((res) => {
					this.userInfo = res.data
					this.facilityOrderRecordVo.ownerId = res.data.signKey
					// this.getTimeTable(this.facilityOrderRecordVo.facilityId,this.facilityOrderRecordVo.orderDate)
				})
			},
			orderFacility(){
				// console.log('b',this.timeTable)
				if(this.facilityOrderRecordVo.timeTableId == null){
					this.dialog.dialogShow = true
				}else{
					this.$myReq({
						url:'/owner/facilityOrder/orderFacility',
						method:'POST',
						data:this.facilityOrderRecordVo
					})
					.then((res) => {
						// console.log(res)
						// location.reload()
						// this.timeTable = []
						this.getTimeTable(this.facilityOrderRecordVo.facilityId,this.facilityOrderRecordVo.orderDate)
						// console.log('c',this.timeTable)
						uni.showToast({
							title: '预约成功',
							image: '../../../static/Icon/facility/orderSuccess.png',
							position:'top',
							duration:1000
						})
					})
				}
			},
			getTimeTable(id,date){
				// console.log('do get time table')
				this.$myReq({
					url:`/owner/facilityOrder/getTimeTable/${id}/${date}`,
					method:'POST'
				})
				.then((res) => {
					this.timeTable = [0,0,0,0,0,0]
					// console.log('do change',res)
					for(let i=0;i<res.data.length;i++){						
						if(res.data[i].id == 1){
							this.timeTable[0] = 1
							this.test = ' '
						}else if(res.data[i].id == 2){
							this.timeTable[1] = 1
							this.test = ' '
						}else if(res.data[i].id == 3){
							this.timeTable[2] = 1
							this.test = ' '
						}else if(res.data[i].id == 4){
							this.timeTable[3] = 1
							this.test = ' '
						}else if(res.data[i].id == 5){
							this.timeTable[4] = 1
							this.test = ' '
						}else if(res.data[i].id == 6){
							this.timeTable[5] = 1
							this.test = ' '
						}
					}
				})
			},
			getFacility(id){
				this.$myReq({
					url:`/owner/facilityOrder/getFacility/${id}`
				})
				.then((res) => {
					this.facility = res.data
				})
			},
			clearClass(){
				this.timeItem1 = 'notActive timeItem'
				this.timeItem2 = 'notActive timeItem'
				this.timeItem3 = 'notActive timeItem'
				this.timeItem4 = 'notActive timeItem'
				this.timeItem5 = 'notActive timeItem'
				this.timeItem6 = 'notActive timeItem'
			},
			selectTime(index){
				if(index == 1){
					if(this.timeTable[0] != 0){
						this.clearClass()
						this.timeItem1 = 'active timeItem'
						this.orderTime = '08:00-10:00'
						this.facilityOrderRecordVo.timeTableId = 1
					}
				}else if(index == 2){
					if(this.timeTable[1] != 0){
						this.clearClass()
						this.timeItem2 = 'active timeItem'
						this.orderTime = '10:00-12:00'
						this.facilityOrderRecordVo.timeTableId = 2
					}	
				}else if(index == 3){
					if(this.timeTable[2] != 0){
						this.clearClass()
						this.timeItem3 = 'active timeItem'
						this.orderTime = '12:00-14:00'
						this.facilityOrderRecordVo.timeTableId = 3
					}	
				}else if(index == 4){
					if(this.timeTable[3] != 0){
						this.clearClass()
						this.timeItem4 = 'active timeItem'
						this.orderTime = '14:00-16:00'
						this.facilityOrderRecordVo.timeTableId = 4
					}	
				}else if(index == 5){
					if(this.timeTable[4] != 0){
						this.clearClass()
						this.timeItem5 = 'active timeItem'
						this.orderTime = '16:00-18:00'
						this.facilityOrderRecordVo.timeTableId = 5
					}	
				}else if(index == 6){
					if(this.timeTable[5] != 0){
						this.clearClass()
						this.timeItem6 = 'active timeItem'
						this.orderTime = '18:00-20:00'
						this.facilityOrderRecordVo.timeTableId = 6
					}
				}
			}
		}
	}
</script>

<style lang="scss">
	.header{
		padding: 20rpx 40rpx 0rpx 40rpx;
		.title{
			font-size: 40rpx;
			font-weight: bold;
			margin-bottom: 20rpx;
		}
		.bottom{
			.info{
				display: flex;
				flex-wrap: wrap;
				justify-content: space-between;
				margin-bottom: 30rpx;
				padding-bottom: 30rpx;
				border-bottom: 2px solid $main-garyA;
				.overhaulDate{
					// border: 1px solid;
					height: 60rpx;
					line-height: 60rpx;
				}
				.useStatus{
					border: 1px solid;
					height: 60rpx;
					width: 200rpx;
					line-height: 60rpx;
					text-align: center;
					// margin-right: 30rpx;
					color: white;
					font-size: 27rpx;
					border-radius: 30rpx;
				}
				.used{
					background-color: #FF2B2B;
				}
				.notUsed{
					background-color: #09BE4F;
				}
			}
			.introduction{
				// border: 1px solid red;
				padding: 30rpx 25rpx 30rpx 25rpx;
				border-radius: 30rpx;
				background-color: $main-garyA;
				color: #000000;
				// box-shadow: 0px 0px 3px 1px $main-garyB;
				font-size: 30rpx;
				line-height: 50rpx;
			}
		}
	}
	.content{
		padding: 30rpx 40rpx 0rpx 40rpx;
		.line{
			border-bottom: 2px solid $main-garyA;
			margin-bottom: 20rpx;
		}
		.timeItemRow{
			// border: 1px solid red;
			display: flex;
			flex-wrap: wrap;
			justify-content: space-around;
			height: 170rpx;
			margin-bottom: 50rpx;
			align-items: center;
			.timeItem{
				// border: 1px solid #cbcbcb;
				border-radius: 30rpx;
				width: 200rpx;
				height: 125rpx;
				align-items: center;
				padding-top: 45rpx;
				.time{
					// border: 1px solid blue;
					margin-bottom: 15rpx;
					text-align: center;
					font-size: 27rpx;
					font-weight: bold;
				}
				.orderState{
					// border: 1px solid blue;
					// font-weight: bold;
					text-align: center;
				}
			}
		}
	}
	.footer{
		padding: 0rpx 40rpx 0rpx 40rpx;
		position: fixed;
		bottom: 10rpx;
		// border: 1px solid red;
		width: 670rpx;
		display: flex;
		flex-wrap: wrap;
		justify-content: space-between;
		// height: 100rpx;
		.left{
			font-size: 30rpx;
			line-height: 50rpx;
			width: 360rpx;
			border-right: 2px solid #cecece;
			// border: 1px solid black;
		}
		.right{
			float: right;
			// border: 1px solid;
			height: 100rpx;
			width: 250rpx;
			text-align: center;
			line-height: 100rpx;
			color: white;
			background-color: #09BE4F;
			border-radius: 10rpx;
		}
	}
	.active{
		color: #FF2B2B;
		border: 1px solid #FF2B2B;
		// box-shadow: 0rpx 0rpx 1rpx 1rpx #FF2B2B;
	}
	.notActive{
		color: #000000;
		border: 1px solid #cbcbcb;
	}
</style>
